<template>
  <div class="homeBox">
    <div>
      <video
        controls="controls"
        autoplay="autoplay"
        loop="loop"
        preload="auto"
        webkit-playsinline="true"
        playsinline="true"
        x5-video-player-type="h5-page"
        x5-video-player-fullscreen="true"
        x-webkit-airplay="allow"
        x5-video-orientation="portraint"
        style="object-fit:fill"
        class="video"
      >
        <source src="https://jstang.xyz/网站首页永不放棄片段.mp4" />
      </video>
    </div>
    <!--x5-video-player-fullscreen="false"-->
    <!-- <div style="display: flex;padding:0 5px">
      <img style="width:33.3%;margin:0;padding:0"
        :src="require('../../assets/tree.png')"
        alt="">
      <img style="width:33.3%;margin:0;padding:0"
      :src="require('../../assets/tree_.png')"
        alt="">
      <img style="width:33.3%;margin:0;padding:0"
      :src="require('../../assets/tree.png')"
        alt="">
    </div>-->
    <div class="swipeImageSty">
      <van-swipe :autoplay="3000" indicator-color="white">
        <van-swipe-item>
          <img :src="require('../../assets/tree.png')" alt />
          <img :src="require('../../assets/tree_.png')" alt />
          <img :src="require('../../assets/tree.png')" alt />
        </van-swipe-item>
        <van-swipe-item>
          <img :src="require('../../assets/tree.png')" alt />
          <img :src="require('../../assets/tree_.png')" alt />
          <img :src="require('../../assets/tree.png')" alt />
        </van-swipe-item>
        <van-swipe-item>
          <img :src="require('../../assets/tree.png')" alt />
          <img :src="require('../../assets/tree_.png')" alt />
          <img :src="require('../../assets/tree.png')" alt />
        </van-swipe-item>
      </van-swipe>
    </div>
    <HelloWorld></HelloWorld>
    <B></B>
    <div class="commodity">
      <van-card
        v-for="item in message"
        :key="item.name"
        @click="jump()"
        :desc="item.desc"
        :title="item.name"
      >
        <div class="thumb" slot="thumb" style="height:100%">
          <img :src="item.image" alt />
        </div>
        <div class="price" slot="price">{{item.price}}</div>
        <div class="bottom" slot="bottom">
          <span class="leftBorder">{{item.bottomOne}}</span>
          <span class="rightBorder">{{item.bottomTwo}}</span>
        </div>
      </van-card>
    </div>
  </div>
</template>
<script>
import HelloWorld from "../../components/HelloWorld.vue";
import B from "../../components/Carousel.vue";
export default {
  data: () => ({
    message: [
      {
        name: "浓香茉莉花茶2019新",
        price: "￥78",
        desc: "净含量:500g",
        bottomOne: "每400减50",
        bottomTwo: "领券满59减10",
        image: require("../../assets/tea.png")
      },
      {
        name: "浓香茉莉花茶2019新",
        price: "￥78",
        desc: "净含量:500g",
        bottomOne: "每400减50",
        bottomTwo: "领券满59减10",
        image: require("../../assets/tea.png")
      }
    ]
  }),
  components: {
    HelloWorld,
    B
  },
  methods: {
    jump() {
      this.$router.push("/commodityDetails");
    }
  }
};
</script>
<style lang="scss" scoped>
.homeBox {
  padding-bottom: 56px;
  .title {
    height: 40px;
    background: rgba(56, 137, 54);
    display: flex;
    align-items: center;
    justify-content: center;
    .leftIcon {
      font-size: 22px;
      position: absolute;
      left: 10px;
      color: #fff;
    }
    input {
      width: 60%;
      padding-left: 10px;
      border: 1px solid #fff;
      border-radius: 8px;
      overflow: hidden;
    }
    .rightIcon {
      font-size: 22px;
      color: #fff;
      position: absolute;
      right: 10px;
    }
  }
  .video {
    width: 100%;
    height: 240px;
    display: block;
    margin: 0 auto;
  }
  .swipeImageSty {
    img {
      width: 33.3%;
      height: 100%;
      margin: 0;
      padding: 0;
    }
  }
  .scrollImage {
    white-space: nowrap;
    overflow: auto;
    vertical-align: middle;
    padding: 0 2px;
    div {
      width: 35%;
      display: inline-block;
      img {
        width: 100%;
        height: 100px;
        margin: 0;
        padding: 0;
      }
    }
  }
  .commodity {
    height: 100%;
    .thumb {
      img {
        width: 100%;
        height: 100%;
      }
    }
    .price {
      padding-top: 10px;
    }
    .bottom {
      .leftBorder {
        float: left;
        border: 1px solid rgba(194, 54, 104);
        border-radius: 5px;
        padding: 2px;
        font-size: 10px;
        height: 16px;
        line-height: 16px;
        color: rgba(194, 54, 104);
      }
      .rightBorder {
        float: left;
        margin: 0 2px;
        border: 1px solid rgba(208, 126, 102);
        border-radius: 5px;
        padding: 2px;
        color: rgba(208, 126, 102);
        height: 16px;
        line-height: 16px;
      }
    }
  }
}
</style>